<template>
  <div>
    <div class="breadcrumb">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/marketingchannels' }"
          >渠道管理</el-breadcrumb-item
        >
        <el-breadcrumb-item :to="{ path: '/marketingchannels' }"
          >流量渠道管理</el-breadcrumb-item
        >
        <el-breadcrumb-item>添加渠道</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-card>
      <el-form ref="editFormRef" :model="info" label-width="120px">
        <el-form-item label="渠道名称">
          <el-input v-model="info.channelName"></el-input>
        </el-form-item>
        <el-form-item label="渠道标识">
          <el-input v-model="info.channelCode"></el-input>
        </el-form-item>
        <el-form-item label="登录密码">
          <el-input v-model="info.password"></el-input>
        </el-form-item>
        <el-form-item label="对外渠道标识">
          <el-input
            v-model="info.outChannelCode"
            @input="outChannelCodeChange"
          ></el-input>
        </el-form-item>
        <el-form-item label="渠道明细页展示">
          <el-checkbox
            :indeterminate="isIndeterminate1"
            v-model="checkAll1"
            @change="handleCheckAllChange1"
            >全选</el-checkbox
          >
          <el-checkbox-group
            v-model="info.channelRuleList"
            @change="handleCheckedCitiesChange1"
          >
            <el-checkbox v-for="city in cities1" :label="city" :key="city">{{
              city
            }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="渠道类型">
          <el-select v-model="info.platformType" placeholder="请选择">
            <el-option label="请选择" value=""></el-option>
            <el-option label="着陆页" value="URL"></el-option>
            <el-option label="接口" value="API"></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="URL" v-if="info.platformType == 'URL'">
          <el-input
            disabled
            v-model="info.url"
            placeholder="请输入url"
          ></el-input>
        </el-form-item> -->
        <el-form-item label="URL">
          <el-input v-model="info.url" placeholder="请输入url"></el-input>
        </el-form-item>
        <el-form-item label="结算方式">
          <el-select v-model="info.settleType" placeholder="请选择">
            <el-option label="请选择" value=""></el-option>
            <el-option label="CPA" value="CPA"></el-option>
            <el-option label="CPS" value="CPS"></el-option>
            <el-option label="CPA+CPS" value="CPA+CPS"></el-option>
            <el-option label="UV" value="UV"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="当日单价">
          <el-input v-model="info.singleAmt"></el-input>
        </el-form-item>
        <el-form-item label="扣量配置">
          <template slot-scope="scope">
            <el-button @click="rule">规则配置</el-button>
            <el-button @click="history">历史记录</el-button>
          </template>
        </el-form-item>

        <el-form-item
          label="渠道租超
					可见配置"
        >
          <el-form-item label="banner链接开关">
            <el-radio v-model="info.isBannerSwitch" label="1">开</el-radio>
            <el-radio v-model="info.isBannerSwitch" label="0">关</el-radio>
          </el-form-item>

          <el-form-item label="贷款链接url" v-if="info.isBannerSwitch == 1">
            <el-input v-model="info.loanUrl"></el-input>
          </el-form-item>

          <el-form-item label="在首页可见">
            <el-radio v-model="info.isMenuShow" label="1">是</el-radio>
            <el-radio v-model="info.isMenuShow" label="0">否</el-radio>
          </el-form-item>
          <el-form-item label="在拒量页可见">
            <el-radio v-model="info.isRejectShow" label="1">是</el-radio>
            <el-radio v-model="info.isRejectShow" label="0">否</el-radio>
          </el-form-item>
          <el-form-item label="在发现页可见">
            <el-radio v-model="info.isLoanShow" label="1">是</el-radio>
            <el-radio v-model="info.isLoanShow" label="0">否</el-radio>
          </el-form-item>
        </el-form-item>
        <el-form-item label="开始时间">
          <el-date-picker
            v-model="info.startTime"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间">
          <el-date-picker
            v-model="info.endTime"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="保存后立即开启">
          <el-radio v-model="info.isOpen" :label="true">立即开启</el-radio>
          <el-radio v-model="info.isOpen" :label="false">暂不开启</el-radio>
        </el-form-item>
        <el-form-item>
          <el-button class="btnprimary" @click="saveInfo">保存</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-dialog title="扣量配置" :visible.sync="ruleDialogVisible" width="50%">
      <el-form :model="ruleForm" label-width="100px">
        <el-form-item label="活动名称">
          <el-input v-model="info.channelName" disabled></el-input>
        </el-form-item>
        <el-form-item label="是否开启">
          <el-select v-model="ruleForm.isOpen" placeholder="请选择">
            <el-option label="开启" :value="true"></el-option>
            <el-option label="关闭" :value="false"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开启时间段">
          <div
            class="flexList"
            v-for="(item, index) in ruleForm.remark"
            :key="index"
          >
            <el-time-picker
              v-model="item.startTime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择开始时间"
            >
            </el-time-picker>
            <span class="listSpan">至</span>
            <el-time-picker
              v-model="item.endTime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择结束时间"
            >
            </el-time-picker>
            <span class="listSpan">比例</span>
            <el-input v-model="item.proportion"></el-input>
            %
            <div
              v-if="index != 0"
              class="remarkbtndelete"
              @click="remarkbtndelete(index)"
            >
              删除
            </div>
          </div>
          <div class="remarkbtnadd" @click="remarkbtnadd">添加时间段</div>
        </el-form-item>
        <el-form-item style="margin-bottom: 0">
          <el-button class="btnprimary" @click="ruleDialogVisible = false"
            >保存</el-button
          >
          <el-button @click="deleteruleForm">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog
      title="历史记录"
      :visible.sync="historyDialogVisible"
      width="50%"
    >
      <el-table :data="historyTable" border stripe>
        <el-table-column prop="time" label="提交时间"></el-table-column>
        <el-table-column prop="txt" label="扣量规则"></el-table-column>
        <el-table-column prop="user" label="提交人"></el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button class="btnprimary" @click="historyDialogVisible = false"
          >关 闭</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
const cityOptions = [
  "PV",
  "UV",
  "CPA",
  "实名人数",
  "授信提交人数",
  "授信成功人数",
  "CPS",
];
// const cityOptions1 = ['姓名', '手机号', '性别','身份证号','注册时间', '授信状态','授信额度','可用额度','借款提交时间','借款金额','期限','借款成功时间','放款状态','还款状态'];
const cityOptions1 = ["姓名", "手机号", "性别", "注册时间"];
export default {
  data() {
    return {
      info: {
        channelName: "",
        channelCode: "",
        password: "",
        outChannelCode: "",
        channelRuleSelList: [],
        channelRuleList: [],
        platformType: "",
        url: "",
        settleType: "",
        createTime: "",
        endTime: "",
        isOpen: false,
        isMenuShow: "0",
        isRejectShow: "0",
        isLoanShow: "0",
        singleAmt: "",
        isBannerSwitch: "0",
        loanUrl: "",
      },
      historyDialogVisible: false,
      ruleDialogVisible: false,
      ruleForm: {
        isOpen: false,
        remark: [{ endTime: "", proportion: "", startTime: "" }],
      },
      historyTable: [
        {
          time: "1111",
          txt: "22222",
          user: "admin",
        },
        {
          time: "1111",
          txt: "22222",
          user: "admin",
        },
        {
          time: "1111",
          txt: "22222",
          user: "admin",
        },
      ],
      checkAll: false,
      cities: cityOptions,
      isIndeterminate: true,
      checkAll1: false,
      cities1: cityOptions1,
      isIndeterminate1: true,
    };
  },
  created() {},
  methods: {
    async history() {
      this.historyDialogVisible = true;
    },
    /* 取消，清空列表 */
    deleteruleForm() {
      this.ruleForm = {
        isOpen: false,
        remark: [{ endTime: "", proportion: "", startTime: "" }],
      };
    },
    /* 保存信息 */
    async saveInfo() {
      if (!this.info.url && !this.info.outChannelCode) {
        this.$message.warning("请填写外渠道标识和URl！");
        return;
      }
      if (!this.info.url.endsWith(this.info.outChannelCode)) {
        this.$message.warning("URL要以对外渠道标识结尾！");
        return;
      }
      if (this.info.singleAmt == "" || this.info.singleAmt == null) {
        this.info.singleAmt = "0";
      }
      const { data: res } = await this.$http.post(
        "/outLinkChannel/saveChannel",
        this.info
      );
      if (res.code !== 200) {
        return this.$message.error(res.msg);
      }
      this.$message.success("修改状态成功");
      this.saveRuleForm();
    },
    /* 查看扣量配置 */
    async rule() {
      this.ruleDialogVisible = true;
    },
    handleCheckAllChange(val) {
      this.info.channelRuleSelList = val ? cityOptions : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
    },
    handleCheckAllChange1(val) {
      this.info.channelRuleList = val ? cityOptions1 : [];
      this.isIndeterminate1 = false;
    },
    handleCheckedCitiesChange1(value) {
      let checkedCount = value.length;
      this.checkAll1 = checkedCount === this.cities1.length;
      this.isIndeterminate1 =
        checkedCount > 0 && checkedCount < this.cities1.length;
    },
    outChannelCodeChange() {
      // console.log(process.env.VUE_APP_CHANNEL_URL);
      // let preUrl = process.env.VUE_APP_CHANNEL_URL;
      // this.info.url = preUrl + this.info.outChannelCode;
    },
    /* 添加扣量配置时间段 */
    remarkbtnadd() {
      this.ruleForm.remark.push({ endTime: "", proportion: "", startTime: "" });
    },
    remarkbtndelete(index) {
      this.ruleForm.remark.splice(index, 1);
    },
    /* 保存 扣量配置*/
    async saveRuleForm() {
      this.ruleForm.remark.forEach((item) => {
        item.startTime = item.startTime.split(" ")[1];
        item.endTime = item.endTime.split(" ")[1];
      });
      const { data: res } = await this.$http.post(
        "/outLinkChannel/saveKlRule",
        {
          channelCode: this.info.channelCode,
          channelName: this.info.channelName,
          isOpen: this.ruleForm.isOpen,
          channelRuleDtoList: this.ruleForm.remark,
        }
      );
      if (res.code !== 200) {
        return this.$message.error("修改状态失败");
      }

      this.$message.success("修改状态成功");
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="less" scoped>
.flexList {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 10px;

  .el-input {
    width: 200px;
  }

  .listSpan {
    margin: 0 10px;
  }
}

.remarkbtnadd {
  color: #0066cc;
}

.remarkbtndelete {
  margin-left: 10px;
  color: #e60000;
}
</style>
